<template>
  <div class='addRaindrop'>
    <div v-show='isAdd == 1' class="addPage">
      <com-header
        right-icon='icon'>
        <div class="titleText" slot='title'>{{title}}</div>
      </com-header>
      <div class="topAdd">
        <div class="addText">shape yourself and let us know you better</div>
        <div class="addButton" @click='_handleAdd'>+ Add raindrop</div>
      </div>
      <div class="rainNull" v-if="raindropList.length == 0">
        <div class="nullBg"></div>
        <div class="nullText">shape yourself through Raindrops</div>
      </div>
      <div class="raindropList" v-if="raindropList.length > 0">
        <div class="wrapList">
          <div class="rainList"
               v-for="(item,index) in raindropList"
               :key=index
          >
            <div class="left">
              <div class="icon"
                   :style="{backgroundImage:`url(${item.background_img})`}"></div>
              <div class="tag">
                <div class="tagName">{{item.name}}</div>
                <div class="others">
                  <div class="little contentNum" v-show='item.topic_num'>{{item.topic_num < 100 ? item.topic_num :
                    '99+'}}
                  </div>
                  <div class="little commentNum" v-show='item.catch_num'>{{item.catch_num < 100 ? item.catch_num :
                    '99+'}}
                  </div>
                </div>
              </div>
            </div>
            <div class="right" @click="() =>_handleDeleteCon(item.tag_id,index)">
              <div class="bg1"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <search v-show='isAdd == 2'/>
    <mt-actionsheet
      :actions="action"
      cancelText='Cancel'
      v-model="sheetVisible"></mt-actionsheet>
  </div>

</template>

<script>
  import { mapGetters, mapActions } from 'Vuex'
  import ComHeader from '../../components/common/Header'
  import Search from '../../components/me/Search'
  import api from '../../plugins/api'
  import { Toast } from 'mint-ui'
  import { MessageBox } from 'mint-ui'

  const Cookie = process.browser ? require('js-cookie') : undefined
  export default {
    components: { ComHeader, Search },
    layout: 'other',
    asyncData() {
      return {}
    },
    data() {
      return {
        title: 'Manage',
        result: ['a', 'b', 'c'],
        raindropList: [],
        sheetVisible: false,
        delateId: null,
        delateIndex: null,
        isAdd: 1,
        action: [{
          name: 'Delate',
          method: this._handleDelete
        }]
      }
    },
    computed: {
      ...mapGetters([])
    },
    created() {
      this._renderRaindrop()
    },
    methods: {
      //弹出确认删除
      _handleDeleteCon(id, i) {
        this.sheetVisible = true
        this.delateId = id
        this.delateIndex = i
      },

      //二次确认
      _handleDelete() {
        MessageBox({
          title: '',
          cancelButtonText: 'Delete',
          confirmButtonText: 'Cancel',
          message: 'Are you sure you want to remove this raindrop?',
          showCancelButton: true
        }).then((action => {
            if (action == 'cancel') {
              this._handleDelTag()
            }
          })
        )
      },
      //删除自己的tag
      async _handleDelTag() {
        const params = {
          sid: Cookie.get('sid'),
          tag_id: this.delateId
        }
        let res = await api.setDelSelfTag(params)
        console.log(res)
        if (res.status == 0) {
          this.raindropList.splice(this.delateIndex,1)
        } else {
          Toast(res.info)
        }
      },

      //获取用户raindrop
      async _renderRaindrop() {
        const params = {
          sid: Cookie.get('sid'),
          uid: this.uid || Cookie.get('user')
        }
        let res = await api.getUserTag(params)
        console.log(res)
        if (res.status == 0) {
          this.raindropList = res.data
          // console.log(this.raindropList)
        } else {
          Toast(res.info)
        }
      },
      _handleAdd() {
        this.isAdd = 2
      }
    }
  }
</script>
<style lang="scss">
  .addRaindrop, .addPage {
    width: 100%;
    height: 100%;

    .topAdd {
      width: 100%;
      height: 188px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .addText {
        font-size: 26px;
        color: #8E97A7;
        line-height: 100px;
      }

      .addButton {
        font-size: 28px;
        width: 690px;
        height: 70px;
        line-height: 70px;
        border-radius: 35px;
        background: #1FCCC0;
        color: #ffffff;
        text-align: center;
      }
    }

    .rainNull {
      display: flex;
      flex-direction: column;
      align-items: center;

      .nullBg {
        width: 700px;
        height: 700px;
        background: url("../../assets/images/21.png") no-repeat center;
        -webkit-background-size: 50%;
        background-size: 50%;
      }

      .nullText {
        font-size: 26px;
        color: #8E97A7;
        line-height: 100px;
      }
    }

    .raindropList {
      padding: 30px;

      .wrapList {
        display: flex;
        flex-direction: column;
        align-items: center;

        .rainList {
          width: 690px;
          height: 140px;
          box-shadow: 0px 2px 44px 0px rgba(95, 100, 106, 0.1);
          border-radius: 16px;
          background: #ffffff;
          display: flex;
          justify-content: space-between;
          padding: 24px 0 24px 24px;
          background: url("") no-repeat center;
          -webkit-background-size: cover;
          background-size: cover;

          .left {
            display: flex;

            .icon {
              width: 92px;
              height: 92px;
              border-radius: 8px;
              background: url("") no-repeat center;
              -webkit-background-size: cover;
              background-size: cover;
            }

            .tag {
              margin-left: 17px;
              display: flex;
              flex-direction: column;
              justify-content: center;

              .tagName {
                color: #333333;
                font-size: 30px;
                line-height: 40px;
                max-width: 450px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .others {
                display: flex;
                font-size: 26px;
                color: #999999;

                .little {
                  padding-left: 40px;
                  margin-right: 60px;
                  position: relative;

                  &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 4px;
                    width: 24px;
                    height: 24px;
                    background: url("../../assets/images/4.png") no-repeat center;
                    -webkit-background-size: cover;
                    background-size: cover;
                  }

                  &.contentNum {
                    &::before {
                      content: '';
                      position: absolute;
                      left: 0;
                      top: 4px;
                      width: 24px;
                      height: 24px;
                      background: url("../../assets/images/23.png") no-repeat center;
                      -webkit-background-size: cover;
                      background-size: cover;
                    }
                  }
                }
              }
            }
          }

          .right {
            width: 179px;
            height: 140px;
            position: relative;
            top: -24px;
            background: url("../../assets/images/24.png") no-repeat center;
            -webkit-background-size: 100%;
            background-size: 100%;

            .bg1 {
              position: absolute;
              top: 40px;
              right: 20px;
              width: 64px;
              height: 64px;
              background: url("../../assets/images/22.png") no-repeat center;
              -webkit-background-size: 60%;
              background-size: 60%;
              opacity: 0.5;
            }
          }
        }
      }
    }

    .mint-actionsheet-listitem {
      border-radius: 24px 24px 0px 0px;
    }

    .mint-actionsheet-listitem, .mint-actionsheet-button {
      height: 120px;
      line-height: 120px;
    }
  }

</style>
